<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>注册</title>
  <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />

  <style type="text/css">
    *, body {
      margin: 0px;
      font-family: '微软雅黑',serif;
    }
  </style>
  <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
  <script th:src="@{/js/jquery.form.js}"></script>
  <script th:src="@{/js/generic.js}"></script>
</head>

<body>

<!--<div th:replace="top :: top"></div>-->
<form id="filePost" method="post" enctype="multipart/form-data" th:action="@{/register}" onsubmit="return register()" >
  <table class="maintable" >
    <tr>
      <td valign="top">
        <div style="width:500px;margin:10px auto;"> <a href="/login">&lt;&lt; 返回</a> </div>
        <table class="logintable" cellpadding="8" style="margin-top:20px;width:330px;margin-bottom: 100px;" >
          <tr>
            <td style="width: 200px;" >用户名</td>
            <td><input type="text" id="userid" class="logininput" maxlength="50" name="userid"></td>
          </tr>
          <tr>
            <td style="width: 200px;" >姓&nbsp;&nbsp;&nbsp;&nbsp名</td>
            <td><input type="text" id="username" class="logininput" maxlength="50" name="username"></td>
          </tr>
          <tr>
            <td >密&nbsp;&nbsp;&nbsp;&nbsp;码</td>
            <td><input type="password" id="password" class="logininput" maxlength="50" name="password"></td>
          </tr>
          <tr>
            <td valign="top">用户头像</td>
            <td>
              <img src="/images/userhead.png" id="img" alt="预览图片" class="userheadpic"> <br />
              <div class="fileUpload">
                <span id="spSmallImage">上传头像</span>
                <input type="file" id="smallfile" name="image" class="upload" accept="image/*" onclick="uploadImage()" onchange="previewFile()"/>
                <input type="hidden" id="hidSmallPic" />
              </div>
            </td>
          </tr>
          <tr>
            <td>用户类型</td>
            <td>
              <select id="type" name="type">
<!--                <option value="名医专家" name="type">名医专家</option>-->
                <option value="学生" name="type" selected="selected">学生</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>联系电话</td>
            <td><input type="text" id="tel" class="logininput" maxlength="50" name="tel"></td>
          </tr>
          <tr>
            <td>电子邮箱</td>
            <td><input type="text" id="email" class="logininput" maxlength="50" name="email"></td>
          </tr>
          <tr>
            <td>院系单位</td>
            <td><input type="text" id="company" class="logininput" maxlength="50" name="company"></td>
          </tr>
          <tr>
            <td>联系地址</td>
            <td><input type="text" id="addr" class="logininput" maxlength="50" name="addr"></td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="submit" value="注&nbsp;&nbsp;册" class="denglubtn">  &nbsp;
              <input type="button" value="返&nbsp;&nbsp;回" class="denglubtn" onclick="window.location.href='/login'">
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>
<!--<div th:replace="bottom :: bottom"></div>-->

</body>
</html>

<script th:inline="javascript">
  function previewFile() {
    var preview = document.querySelector('img')
    var fileDom = document.querySelector('input[type=file]')
    // 获取得到file 对象
    var file = fileDom.files[0]
    // 限制上传图片的大小
    if(file.size > 1024 * 1024 * 5) {
      alert('图片大小不能超过 5MB!');
      return false;
    }
    // 创建url
    var imgUrl = window.URL.createObjectURL(file)
    preview.setAttribute("src", imgUrl)
    // 更改img url 以后释放 url
    preview.onload = function() {
       console.log('图片加载成功')
      URL.revokeObjectURL(imgUrl)
    }
  }
  function register() {
    if ($("#userid").val() == "") {
      alert("请输入用户名");
      return false;
    }
    if ($("#username").val() == "") {
      alert("请输入姓名");
      return false;
    }
    if ($("#password").val() == "") {
      alert("请输入密码");
      return false;
    }
    return true;
  }

  var mesg = [[${message}]]
  if (mesg == 3) {
    alert("用户名已经存在！");
  }


</script>
